<template>
	<view class="container">
		<view class="header">
			<image src="../../static/下载.png" @click="back"
				style="width: 25px;height: 25px;margin-top: 8px;margin-left: 8px;" mode="">
			</image>
			<view class="input-search">
				<input type="text" placeholder="奥利奥饼干"
					style="width: 235px;height: 25px;margin-left: 45px;border-radius: 0px 15px 15px 0px;margin-top: -1px;font-size: 12px;" />
			</view>
		</view>
		<view class="left">
			<scroll-view scroll-y="true" style="height: 670px;">
				<uni-list v-for="(item,index) in navItem" :key="item.classifyId">
					<uni-list-item :clickable="true" @click="handleClick(item.classifyId)" :class="{'active': activeIndex === item.classifyId}"
						:title="item.classifyName"></uni-list-item>
				</uni-list>
			</scroll-view>
		</view>
		<!-- v-if="item.children.length>0" -->
		<view class="right">
			<scroll-view scroll-y="true" class="scroll-Y" style="height: 670px;" :show-scrollbar="showScrollbar">
				<uni-section v-for="(item,index) in food" :key="item.classifyId" :title="item.classifyName" type="line"
					padding>
					<uni-grid :showBorder="showBorder" :column="2" :highlight="true">
						<uni-grid-item v-for="(item1, index1) in childrenItem" :index="index1"
							v-if="item.classifyId==item1.classifyParent" :key="item1.classifyId">
							<view class="grid-item-box" style="background-color: #fff;text-align: center;">
								<image :src="item1.classifyImageUrl" mode="heightFix"></image><br />
								<text class="text">{{item1.classifyName}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import { item } from "../../apiRequest/category"
	// #endif

	export default {
		data() {
			return {
				navItem: [],
				food: [],
				childrenItem: [],
				showBorder: false,
				showScrollbar: false,
				isTouchScrollView: false,
				clickedNavIndex: 0,
				viewNavIndex: 0,
				activeIndex:1
			}
		},
		onLoad() {
			this.onload(1);
		},
		methods: {
			back() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			onload(index) {
				this.navItem = [];
				this.food = [];
				this.childrenItem = [];
				item().then(item=>{
					for (var i = 0; i < item.length; i++) {
						if(item[i].classifyParent == 0){
							this.navItem.push(item[i]);
						}
						if(item[i].classifyParent == index){
							this.food.push(item[i]);
						}
						if(item[i].classifyParent != 0 && item.classifyParent != index){
							this.childrenItem.push(item[i]);
						}
					}
				})
			},
			handleClick(index) {
				this.activeIndex = index;
				this.onload(index);
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
	}

	.active {  
	  background-color: #409EFF !important; /* 示例：将背景色设置为蓝色 */  
	  /* 你可以在这里添加更多的样式 */  
	}
	
	.header {
		position: fixed;
		width: 100%;
		height: 40px;
		background-color: white;
		border-bottom: 1px solid #f6f6f6;
		z-index: 9999;
	}

	.input-search {
		float: right;
		margin-right: 50px;
		width: 280px;
		height: 25px;
		background-color: #f6f6f6;
		border-radius: 15px;
		margin-top: 8px;
		background-image: url(../../static/搜索.png);
		background-repeat: no-repeat;
		background-size: 20px;
		background-position: 15px;
	}

	.left {
		float: left;
		width: 20%;
		height: 100%;
		font-size: 14px;
		margin-top: 40px;
	}

	.right {
		float: right;
		width: 80%;
		height: 600px;
		margin-top: 40px;
	}

	image {
		width: 100px;
		height: 100px;
	}

	.uni-section .uni-section-header__content .distraction {
		flex-direction: row;
		align-items: center;
		font-weight: bold;
	}
</style>